<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-row :gutter="24">
        <div class="jjwjsj-title">
          <span>截至2022年9月末已发生未列账成本明细表</span>
        </div>
        <a-col :offset="18" :md="6" :sm="8" style="display: flex; justify-content: flex-end; align-items: center">
          <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
            <a-button :disabled="editingKey !== ''" type="primary" icon="search" @click="searchQuery">查询</a-button>
            <a-button
              :disabled="editingKey !== ''"
              type="primary"
              icon="download"
              @click="testExportList"
              style="margin: 0px 8px"
            >
              导出
            </a-button>
            <a-upload
              name="file"
              :showUploadList="false"
              :multiple="false"
              :headers="tokenHeader"
              :before-upload="beforeUpload"
              :action="importExcelUrl"
              @change="handleImportExcel"
              accept=".docx, .doc, .xlsx, .xls, .pdf, .jpeg, .png"
            >
              <a-button :loading="upLoading" :disabled="editingKey !== ''|| upLoading" type="primary" icon="import">导入</a-button>
            </a-upload>
          </span>
        </a-col>
      </a-row>
    </div>

    <!-- 列表区域 -->
    <div>
      <div class="inforMation">
        <!-- <span class="redStar">
          项目名称：
          <a-select
            placeholder="请选择项目名称"
            show-search
            allowClear
            :filter-option="false"
            :disabled="editingKey !== ''"
            @change="handleChangeSelectXmmc"
            v-model="queryParam.xmmc"
            style="width: 300px"
            @search="(value) => getProjectNames(value)"
          >
            <a-select-option v-for="item in xmmcData" :key="item.value" :value="item.value">
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ item.label }}</span>
                </template>
                <span>{{ item.label }}</span>
              </a-tooltip>
            </a-select-option>
          </a-select>
        </span> -->
        <span class="redStar">
          <span>项目名称：</span>
          <a-input
            @click.native="openOrganModel"
            v-model="queryParam.xmmc"
            placeholder="请选择"
            style="width: 300px"
          />
        </span>
        <span>金额单位：万元</span>
      </div>
      <a-table
        ref="table"
        size="middle"
        bordered
        :columns="columns"
        class="edit-list"
        :dataSource="dataSource"
        :pagination="false"
        :loading="loading"
        :scroll="{ y: 550 }"
      >
        <template slot="remark" slot-scope="text, record">
          <a-textarea
            v-if="record.editable"
            :value="text"
            @change="(e) => handleChangeInput(e.target.value, record.id, 'remark')"
          ></a-textarea>
          <j-ellipsis v-else :value="text" :length="8" />
        </template>

        <!-- 表格中数字部分 -->
        <template v-for="col3 in numColList" :slot="col3" slot-scope="text, record">
          <div :key="col3" v-if="record.totalName != '合计' && !record.serialnumber">
            <a-input-number
              style="width: 100%"
              :precision="2"
              v-if="record.editable"
              :value="text"
              @change="(value) => handleChange(value, record.id, col3, 'float')"
            ></a-input-number>
            <span v-else>{{ text }}</span>
          </div>
          <div :key="col3" v-else style="width: 100%; text-align: center">
            {{ text }}
          </div>
        </template>

        <template v-slot:action="text, record">
          <div v-if="record.totalName !== '合计' && !record.serialnumber" class="editable-row-operations">
            <span v-if="record.editable">
              <a @click="() => save(record.id)">保存</a>
              <a-divider type="vertical" />
              <a-popconfirm title="是否舍弃本次编辑内容？" @confirm="() => cancel(record.id)">
                <a>取消</a>
              </a-popconfirm>
            </span>
            <span v-else>
              <a :disabled="editingKey !== ''" @click="() => edit(record.id)">编辑</a>
              <a-divider type="vertical" />
              <a-popconfirm
                :disabled="editingKey !== ''"
                title="是否确认删除？"
                @confirm="
                  () => {
                    Delete(record)
                  }
                "
              >
                <a>删除</a>
              </a-popconfirm>
            </span>
          </div>
        </template>
      </a-table>
    </div>
    <SelectDepat ref="departModal" :depurl="url.xmmc" @getdata="getData" keyName="xmmc"/>
  </a-card>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { CommonMixin } from '@/views/sj/sjxxzhbb/jjwjsj/mixins/common.js'
import columns from './indexColumns'
import SelectDepat from '@/views/sj/sjxxzhbb/jjwjsj/mixins/SelectDepat'
export default {
  mixins: [JeecgListMixin, CommonMixin],
  components: { SelectDepat },
  data() {
    return {
      columns: columns(this),
      importExcelUrl: `${window._CONFIG['domianURL']}/sjxxzhbb/mxb2/importExcel`,
      url: {
        list: '/sjxxzhbb/mxb2/listNoPage',
        hjlist: '/sjxxzhbb/mxb2/queryTotalData',
        exportList: '/sjxxzhbb/mxb2/exportReport',
        isExistenceExcel: '/sjxxzhbb/mxb2/queryIsExist',
        xmmc: '/sjxxzhbb/mxb1/queryXmmc',
        delete: '/sjxxzhbb/mxb2/delete',
        saveRowData: '/sjxxzhbb/mxb2/edit',
      },
      editingKey: '',
      queryParam: {
        deptId: undefined,
        xmmc: '',
      },
      model: {
        deptId: '',
        xmmc: '',
      },
      xmmcData: [],
      disableMonmomMixinCreated: false,
      isNeedSerial: false,
      ellipsisColList: ['remark'],
      numColList: [
        'yfsWlzLwf',
        'zmyfQtskLwf',
        'yfsWlzClcb',
        'zmyfQtskClf',
        'yfsWlzJxf',
        'zmyfQtskJxf',
        'yfsWlzQtfy',
        'zmyfQtskQtkx',
      ],
    }
  },
  watch: {
    $route: {
      handler(to) {
        if (Object.keys(to.params).length > 0) {
          let { record } = to.params
          this.model = Object.assign({}, JSON.parse(record))
          this.queryParam.deptId = this.model.deptId
          this.queryParam.xmmc = this.model.gcmc
          this.searchQuery()
        }
        console.log('我是监听')
      },
      immediate: true,
    },
  },
  mounted() {
    this.getProjectNames()
  },
  methods: {
    getData(data) {
      // data.map(item=>{

      // })
      this.queryParam.deptId = data[0].deptId
      this.queryParam.xmmc = data[0].label
      this.searchQuery()
    },
    testExportList() {
      if (this.queryParam.deptId) this.OnTestExportList({ deptId: this.queryParam.deptId })
      else {
        this.$message.error('请选择项目名称')
      }
    },
    //  查询
    searchQuery() {
      if (this.queryParam.xmmc) this.EnhanceLoad()
      else {
        this.$message.error('请选择项目名称')
      }
    },
    handleChangeSelectXmmc(value) {
      let item = this.xmmcData.find((item) => item.value.indexOf(value) != -1)
      this.queryParam.deptId = item.deptId
      this.queryParam.xmmc = item.value
    },
    save(id) {
      let NewData = [...this.dataSource]
      let targetRowData = NewData.find((item) => id === item.id)
      if (targetRowData) {
        this.editingKey = ''
        delete targetRowData.editable
        this.SaveEditRowData(targetRowData)
      } else {
        this.$message.error('程序有误')
      }
    },
  },
}
</script>
<style lang="less" scoped>
@import '~@assets/less/common.less';
@import '~@views/sj/sjxxzhbb/css/baobiaotable.less';

.edit-list {
  /deep/ .ant-table-thead {
    tr {
      th {
        padding: 12px 8px !important;
      }
    }
  }
}
</style>